<template>
  <div class="password-master__mobile">
    <div class="mobile-header">
      <button
        class="mobile-header__more"
        @click="appActionSheet.visible = true"
        ><i class="iconfont pm-icon-gengduo"></i></button>
    </div>
    <div class="mobile-records">
      <ul class="mobile-records__inner">
        <li
          class="mobile-records__item"
          v-for="record in list"
          :key="record.id"
          :style="{'background-color': record.bgColor}"
        >
          <h5 class="mobile-records__item-name">{{ record.name }}</h5>
          <p class="mobile-records__item-created-time">{{ record.createdTime }}</p>
          <button
            class="mobile-records__item-more"
            @click="onClickRecord(record)"
          ><i class="iconfont pm-icon-gengduo"></i></button>
        </li>
      </ul>
    </div>
    <ActionSheet
      key="appActionSheet"
      :visible.sync="appActionSheet.visible"
      :buttons="appActionSheet.buttons"
      @confirm="onConfirmAppActionSheet"></ActionSheet>
    <ActionSheet
      key="recordActionSheet"
      :visible.sync="recordActionSheet.visible"
      :buttons="recordActionSheet.buttons"
      @confirm="onConfirmRecordActionSheet"></ActionSheet>
    <button
      class="btn-copy-password"
      ref="btnCopyPassword"
      :style="{visibility: 'hidden'}">hidden</button>
    <button
      class="btn-copy-account"
      ref="btnCopyAccount"
      :style="{visibility: 'hidden'}">hidden</button>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import randomColor from 'randomcolor'
import pmMinxin from '@/mixins/page-pm'
import ClipboardJS from 'clipboard'

import { localStore } from '@/utils/store'
import { PM_LOCAL_MASTER_CODE_KEY } from '@/js/constants'

import ActionSheet from './components/actionsheet.vue'

export default {
  name: 'IndexPageMobile',
  mixins: [pmMinxin],
  components: { ActionSheet },
  data() {
    return {
      appActionSheet: {
        visible: false,
        buttons: [
          // { name: 'add', value: 'add' },
          { name: 'upload', value: 'upload' },
          { name: 'download', value: 'download' },
          { name: 'change local master code', value: 'changeLocalMasterCode' }
        ]
      },
      recordActionSheet: {
        visible: false,
        buttons: [
          { name: 'copy account', value: 'copy-account' },
          { name: 'copy password', value: 'copy-password' },
          // { name: 'edit', value: 'edit' },
          { name: 'delete', value: 'delete' }
        ]
      },
      dataLoading: true
    }
  },
  mounted() {
    this.$snotify.async('', 'loading data', () => new Promise((resolve) => {
      this.init().then(() => resolve(
        {
          title: 'Success!!!',
          body: '',
          config: {
            closeOnClick: true,
            timeout: 1000
          }
        }
      ))
    }))
    const clipboardPassword = new ClipboardJS('.btn-copy-password', {
      text: () => this.recordDetail.password
    })
    clipboardPassword.on('success', () => {
      this.$snotify.success('copied', { timeout: 1000, showProgressBar: false })
    })
    const clipboardAccount = new ClipboardJS('.btn-copy-account', {
      text: () => this.recordDetail.account
    })
    clipboardAccount.on('success', () => {
      this.$snotify.success('copied', { timeout: 1000, showProgressBar: false })
    })
  },
  computed: {
    list() {
      return this.records.map(record => ({
        ...record,
        createdTime: dayjs(record.createdAt * 1000).format('YYYY-MM-DD hh:mm:ss'),
        bgColor: randomColor({ luminosity: 'light' })
      }))
    },
    currentRecord() {
      return this.records.find(record => record.id === this.recordDetailId)
    }
  },
  methods: {
    onClickRecord(record) {
      if (this.selectItem(record)) {
        this.recordActionSheet.visible = true
      }
    },
    onConfirmRecordActionSheet(operator) {
      switch (operator) {
        case 'copy-account':
          this.$refs.btnCopyAccount.click()
          break
        case 'copy-password':
          this.$refs.btnCopyPassword.click()
          break
        case 'delete':
          if (this.currentRecord) {
            this.deleteItem(this.currentRecord)
          }
          break
        default:
      }
    },
    onConfirmAppActionSheet(operator) {
      switch (operator) {
        case 'upload':
          this.uploadRecords()
          break
        case 'download':
          this.downloadRecords()
          break
        case 'changeLocalMasterCode':
          this.onChangeLocalMasterCode()
          break
        default:
      }
    },
    onChangeLocalMasterCode() {
      // eslint-disable-next-line no-alert
      const localMasterCode = window.prompt('enter your local master code', this.localMasterCode)
      if (!localMasterCode || localMasterCode.length === 0) {
        return
      }
      this.setLocalMasterCode(localMasterCode)
      localStore.set(PM_LOCAL_MASTER_CODE_KEY, localMasterCode)
    }
  }
}
</script>

<style lang="scss">
.password-master__mobile {
  font-size: .14rem;
  padding-top: 1rem;
  h5,p {
    margin: 0;
  }
  .mobile-header {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    height: 1rem;
    box-shadow: 1px 0 6px rgba(0, 0, 0, .5);
    background-color: #3799ec;
    z-index: 1;
    &__more {
      margin: 0 .3rem 0 0;
      padding: 0;
      border: 0;
      outline: 0;
      display: flex;
      background-color: transparent;
      color: #fff;
      .pm-icon-gengduo {
        font-size: .5rem;
      }
    }
  }
  .mobile-records {
    &__inner {
      display: flex;
      flex-wrap: wrap;
      list-style: none;
      padding: 0;
      margin: 0;
      margin-left: -.5rem;
      padding: .4rem .3rem;
    }
    &__item {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 3.2rem;
      height: 2rem;
      margin: 0 0 .24rem .5rem;
      border-radius: .08rem;
      box-shadow: 0 0 .2rem rgba(0, 0, 0, .3);
      &-name {
        font-size: 0.34rem;
        text-overflow: ellipsis;
        overflow: hidden;
        max-width: 100%;
      }
      &-created-time {
        position: absolute;
        left: .1rem;
        bottom: .1rem;
        color: #333;
      }
      &-more {
        position: absolute;
        right: .1rem;
        bottom: .1rem;
        color: #333;
        padding: 0;
        margin: 0;
        border: 0;
        outline: 0;
        display: flex;
        background-color: transparent;
      }
    }
  }
}
</style>
